<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button class="btn-add">添加事件</button>
  <button class="btn-delete">移除事件</button>
  <button class="btn-dispatch">触发事件</button>
  <ul></ul>
  <script>
    class MyEvents{
      constructor(){
        this.events = {}
      }

      // 触发一个事件处理
      dispatch(eventName, ...args){
        if(!this.events[eventName]){
          return;
        }
        this.events[eventName].call(this, ...args);
      }

      // 删除一个事件处理
      off(eventName){
        if(!this.events[eventName]){
          return;
        }
        delete this.events[eventName];
      }

      // 添加一个事件处理
      on(eventName, fn){
        this.events[eventName] = fn;
      }
    }

    let events = new MyEvents();

    
    events.on('a', function(val){
      console.log(val);
    })

    document.querySelector('.btn-add').onclick = function(){
      events.on('b', function(val){
        console.log(val);
      })
      console.log(events);
    }

    document.querySelector('.btn-delete').onclick = function(){
      events.off('a')
      console.log(events);
    }

    document.querySelector('.btn-dispatch').onclick = function(){
      events.dispatch('b', 111)
    }
  </script>
</body>
</html>